<!-- 商城 - 用户会员码组件 -->
<template>
	<view class="vk-mall-vip-code">
		<u-popup
			:value="value"
			mode="bottom"
			:safe-area-inset-bottom="true"
			height="1100"
			border-radius="20"
			:closeable="true"
			@input="_input"
			@open="_open"
			@close="_close"
		>
			<view class="body">
				<image class="logo" :src="vk.getVuex('$user.mchInfo.logo')" mode="aspectFill"></image>
				<view v-if="value" class="qrcode" @click="vk.alert($fn.getData(userInfo,'vip_code.code'),'会员码')">
					<view class="tips" style="margin: 60rpx 0;"> 需要用到会员码时可出示  </view>
					<vk-data-qrcode :text="$fn.getData(userInfo,'vip_code.code')" :loading="loading" :size="350"></vk-data-qrcode>
					<view class="tips" style="margin-top: 60rpx;"> 会员码将在<text style="color: red;padding: 0 10rpx;">{{ countdown }}秒</text>后自动刷新，请勿截图分享 </view>
				</view>
				<view class="balance-box">
					<view class="balance-item">
						<view class="balance-num">{{ $fn.getData(userInfo,'account_balance.balance', 0) }}</view>
						<view class="balance-text">余额</view>
					</view>
					<view class="balance-item">
						<view class="balance-num">{{ $fn.getData(userInfo,'account_integral.balance', 0) }}</view>
						<view class="balance-text">积分</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: "vk-mall-vip-code",
	props: {
		value:{
			Type:Boolean,
			default:false
		},
		refreshInterval:{
			Type:[Number,String],
			default:90
		},
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			loading:false,
			userInfo:{

			},
			countdown:0
		};
	},
	mounted() {
		this.init();
	},
	destroyed(){
		clearInterval(this.timer);
	},
	methods: {
		// 初始化
		init() {},
		_input(value){
			this.$emit("input",value);
		},
		getVipCode(){
			let that = this;
			vk.callFunction({
				url: 'client/user.getVipCode',
				loading:{ name:"loading", that },
				success:(data) => {
					that.userInfo = data.userInfo;
				}
			});
		},
		_open(){
			let that = this;
			let { vk, refreshInterval } = that;
			let userInfo = vk.getVuex("$user.userInfo");
			let actionKey = true;
			if (userInfo.vip_code) {
				let nowTime = Date.now();
				if (nowTime < userInfo.vip_code.exp_time){
					actionKey = false;
				}
			}
			if (actionKey) {
				that.getVipCode();
			} else {
				that.userInfo = userInfo;
			}
			that.countdown = refreshInterval;
			that.timer = setInterval(() => {
				if (that.countdown <= 0){
					that.countdown = refreshInterval;
					that.getVipCode();
				} else {
					that.countdown--;
				}
			}, 1000);
		},
		_close(){
			clearInterval(this.timer);
		}
	},
	// 监听器
	watch:{

	},
	// 计算属性
	computed: {

	}
};
</script>

<style lang="scss" scoped>
	.body{
		position: relative;
		padding: 50rpx;
		display: flex;
		align-items: center;
		flex-flow: column;
		.logo{
			width: 150rpx;
			height: 150rpx;
			border-radius: 20rpx;
			overflow: hidden;
			display: block;
		}
		.qrcode{
			display: flex;
			align-items: center;
			flex-flow: column;
		}
		.tips{
			text-align: center;
			color: #9a9a9a;
		}
		.balance-box{
			display: flex;
			background-color: var(--bgcolor);
			width: 90%;
			margin: 60rpx auto 0 auto;
			padding: 20rpx 0;
			border-radius: 20rpx;
			overflow: hidden;
			.balance-item{
				flex: 1;
				text-align: center;
				.balance-num{
					color: #000000;
					font-weight: bold;
					font-size: 34rpx;
				}
				.balance-text{
					margin-top: 10rpx;
					color: #9a9a9a;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
